<template>
  <div class="app-container">
    <el-calendar v-model="value" id="calendar">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }">
        <!--自定义内容-->
        <div>
          <div class="calendar-day">
            {{ data.day.split("-").slice(2).join("-") }}
          </div>
          <div v-for="item in calendarData">
            <div
              v-if="item.months.indexOf(data.day.split('-').slice(1)[0]) != -1"
            >
              <div
                v-if="
                  item.days.indexOf(data.day.split('-').slice(2).join('-')) !=
                  -1
                "
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item.things"
                  placement="right"
                >
                  <div class="is-selected">{{ item.things }}</div>
                </el-tooltip>
              </div>
              <div v-else></div>
            </div>
            <div v-else></div>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import {
  listRecord,
  getRecord,
  delRecord,
  addRecord,
  updateRecord,
} from "@/api/business/attendRecord";

export default {
  name: "Record",
  data() {
    return {
      calendarData: [
        {
          months: ["11"],
          days: [
            "01",
            "02",
            "03",
            "06",
            "07",
            "08",
            "09",
            "10",
            "13",
            "14",
            "15",
            "16",
            "17",
          ],
          things: "正常",
        },
        { months: ["11"], days: ["21"], things: "早退" },
        { months: ["11"], days: ["20"], things: "迟到" },
        { months: ["11"], days: ["22"], things: "请假" },
      ],
      value: new Date(),
    };
  },
  created() {},
  methods: {},
};
</script>
<style scoped lang="scss">
.app-container {
  .head-container {
    margin-bottom: 10px;
  }
  .tree-container {
    padding: 10px 0;
    background-color: #fff;
  }
}
.is-selected {
     background-color: #ff0 !important;
}
</style>
